<template>
	<view class="listLeft">
		<text class="name">@{{item.userName}}</text><br>
		<text class="title">{{item.title}}</text>
		<view class="box">
			<view class="music">
				所以说永远多长
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"list-Left",
		props: {
			item: {
				type: Object,
				default: {}
			},
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.listLeft {
		// box-sizing: border-box;
		width: 95%;
		color: white;

		.name {
			display: block;
			margin-bottom: 20rpx;
		}

		.title {
			display: block;
			font-size: 24rpx;
			white-space: normal;
		}

		.box {
			width: 100px;
			overflow: hidden;

			.music {
				height: 35px;
				line-height: 35px;
				font-size: 15px;
				width: 200px;
				animation: music 4s linear 0.2s infinite;
			}

			@keyframes music{
				0%{
					transform: translate3d(50%,0,0);
				}
				100%{
					transform: translate3d(-70%,0,0);
				}
			}
		}

	}
</style>